<template>
  <div class="rectification">
    <auth-project style="width:300px;" level="project" @selectProject="getProject" />
    <div class="divider" />
    <div id="pieChart" style="width: 500px;height: 400px" />
    <div class="rectify-content">
      <el-card class="rectify-rate">
        <div slot="header" class="clearfix">
          <span>整改率</span>
        </div>
        <div class="rate-list">
          <div class="item">
            <div>整改率</div>
            <div class="rate-num1">{{ (pieData.rectifyRate * 100).toFixed(2) }}%</div>
          </div>
          <div class="item">
            <div>及时整改率</div>
            <div class="rate-num">{{ (pieData.rectifyQuickRate * 100).toFixed(2) }}%</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import AuthProject from '../qualityManage/components/AuthProject'
import * as echarts from 'echarts'
import { getConstruRectification } from '@/api/statement/statement'
export default {
  name: 'Rectification',
  components: {
    AuthProject
  },
  data() {
    return {
      queryParams: {
        projectId: ''
      },
      currentProject: {},
      option: {
        title: {
          text: '问题总数',
          left: 'center',
          top: '45%',
          textStyle: {
            color: '#606266',
            fontSize: 16,
            align: 'center'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        graphic: { // 图形中间文字
          type: 'text',
          left: 'center',
          top: '55%',
          style: {
            text: '',
            textAlign: 'center',
            fill: '#606266',
            fontSize: 20
          }
        },
        textStyle: {
          color: '#606266'
        },
        series: [
          {
            name: '整改情况',
            type: 'pie',
            radius: ['40%', '70%'],
            label: {
              formatter: '{b}'
            },
            labelLine: {
              show: true
            },
            data: []
          }
        ]
      },
      pieChart: null,
      pieData: {
        rectifyRate: 0,
        rectifyQuickRate: 0
      }
    }
  },
  created() { // 初始化

  },

  methods: {
    getProject(project) {
      this.currentProject = project
      this.queryParams.projectId = project.id
      this.init()
    },
    init() {
      const pieId = document.getElementById('pieChart')
      this.pieChart = echarts.init(pieId)
      this.pieChart.setOption(this.option)
      this.pieChart.showLoading()
      getConstruRectification(this.queryParams).then(
        (response) => {
          if (response.code === 200) {
            this.pieData = response.data
            const pieData = {
              graphic: {
                style: {
                  text: response.data.all
                }
              },
              series: {
                data: []
              }
            }
            pieData.series.data.push({
              value: this.pieData.norectify,
              name: '未整改',
              itemStyle: {
                color: '#ff4949'
              },
              label: {
                color: '#ff4949'
              }
            })
            pieData.series.data.push({
              value: this.pieData.rectify,
              name: '已整改',
              itemStyle: { color: '#409EFF' },
              label: {
                color: '#409EFF'
              }
            })
            this.pieChart.setOption(pieData)
          }
        }
      ).finally(() => {
        this.pieChart.hideLoading()
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.rectification {
  padding: 10px 20px;
  .divider {
    margin: 10px 0;
    border-bottom: 1px solid #dcdfe6;
  }
  .rectify-content {
    font-size: 14px;
    width: 500px;
    display: flex;
    justify-content: center;
    .rectify-rate {
      width: 300px;
      color: #606266;
      margin-top: 10px;
      .rate-list {
        display: flex;
        justify-content: space-around;
        font-size: 12px;
        .item {
          .rate-num1,
          .rate-num {
            font-size: 20px;
            text-align: center;
            margin-top: 10px;
          }
          .rate-num1 {
            color: #ff4949;
          }
        }
      }
    }
  }
}
</style>
